import * as React from "react";
import { makeStyles } from "@material-ui/styles";
import { StyleRules } from "@material-ui/styles/withStyles";
import { RouteComponentProps } from "react-router";
import { PersonData } from "../data/common";
import bgImg from "../images/headerBGI.png";
import moment from "moment";
import {
  AppBar,
  Card,
  CardActionArea,
  CardContent,
  CardMedia,
  Chip,
  Grid,
  GridList,
  GridListTile,
  IconButton,
  Toolbar,
  Typography
} from "@material-ui/core";
import { Icon, WhiteSpace } from "antd-mobile";
import { Link } from "react-router-dom";
import DoneIcon from "@material-ui/icons/Done";
import { useEffect, useState } from "react";
import service from "../request/Service";

const useStyles = makeStyles<
  StyleRules<
    any,
    | "root"
    | "image"
    | "header"
    | "gridList"
    | "livePhoto"
    | "media"
    | "menuButton"
  >
>({
  root: {
    minWidth: 320,
    maxWidth: 640,
    margin: "0 auto",
    "& .am-wingblank.am-wingblank-lg": {
      margin: 0
    }
  },
  image: {
    width: 100,
    height: 100,
    borderRadius: "50%"
  },
  header: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    background: `url(${bgImg}) no-repeat fixed`,
    backgroundSize: "100% 100%",
    color: "#9d9d9d",
    flexDirection: "column",
    padding: "80px 20px 0 20px",
    "& div": {
      marginTop: 10
    },
    "& .name-sun": {
      fontSize: 18,
      fontWeight: "bold"
    }
  },
  gridList: {},
  livePhoto: {
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "space-around",
    overflow: "hidden"
  },
  media: {
    height: 280
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20
  }
});
interface Iprops extends RouteComponentProps<any> {}
/**
 * 描述：
 *  用户详情
 * @author sunshixiong
 * @date 2019/3/28-17:50
 */
const DetailInfo = (props: Iprops) => {
  const classes = useStyles();
  const [data, setData] = useState<PersonData>({});
  useEffect(() => {
    service
      .get("/personInfo", { params: { id: props.match.params.id } })
      .then(value => {
        setData(value.data.content[0]);
      });
  }, []);
  useEffect(() => {
    if (data.name) {
      document.title = `${data.name}的简历`;
    }
  }, [data]);
  return (
    <div className={classes.root}>
      <AppBar position="static" color={"default"}>
        <Toolbar>
          <IconButton
            className={classes.menuButton}
            color="inherit"
            aria-label="Menu"
          >
            <Link to={"/"}>
              <Icon type="left" size={"md"} />
            </Link>
          </IconButton>
        </Toolbar>
      </AppBar>
      <Card>
        <CardActionArea>
          <CardMedia
            className={classes.media}
            image={data.headPortrait ? data.headPortrait[0].url : ""}
            title="Contemplative Reptile"
          />
          <CardContent>
            <Typography gutterBottom={true} variant="h5" component="h2">
              {data.name}
            </Typography>
            <Typography component="p">
              <Grid container={true}>
                <Grid item={true} xs={6}>
                  性别：{data.sex}
                </Grid>
                <Grid item={true} xs={6}>
                  婚否：{data.marriage}
                </Grid>
                <Grid item={true} xs={6}>
                  籍贯：{data.nativePlace}
                </Grid>
                <Grid item={true} xs={6}>
                  出生日期：{moment(data.birthday).format("YYYY-MM-DD")}
                </Grid>
                <Grid item={true} xs={6}>
                  健康状况：{data.health}
                </Grid>
                <Grid item={true} xs={6}>
                  名族：{data.nationalists}
                </Grid>
                <Grid item={true} xs={6}>
                  身高：{data.height}(cm)
                </Grid>
                <Grid item={true} xs={6}>
                  体重：{data.weight}(kg)
                </Grid>
                <Grid item={true} xs={6}>
                  参加培训：{data.training}
                </Grid>
                <Grid item={true} xs={6}>
                  文化程度：{data.standardCulture}
                </Grid>
                <Grid item={true} xs={12}>
                  工作时间：
                  {moment(
                    data.workExperience ? data.workExperience[0] : null
                  ).format("YYYY-MM-DD")}
                  到
                  {moment(
                    data.workExperience ? data.workExperience[1] : null
                  ).format("YYYY-MM-DD")}
                </Grid>
                <Grid item={true} xs={12}>
                  家庭地址：{data.address}
                </Grid>
                <Grid item={true} xs={12}>
                  户口所在地：{data.domicilePlace}
                </Grid>
              </Grid>
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
      <WhiteSpace size="sm" />
      <Card>
        <CardActionArea>
          <CardContent>
            <Typography gutterBottom={true} variant="h5" component="h2">
              {"月嫂服务-产妇护理"}
            </Typography>
            <Typography component="p">
              <Grid container={true}>
                {data.maternalCare
                  ? data.maternalCare.map((value, index) => {
                      return (
                        <Grid
                          key={index}
                          item={true}
                          xs={6}
                          style={{ padding: 10 }}
                        >
                          <Chip
                            avatar={<DoneIcon />}
                            label={value}
                            variant="outlined"
                          />
                        </Grid>
                      );
                    })
                  : ""}
              </Grid>
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
      <WhiteSpace size="sm" />
      <Card>
        <CardActionArea>
          <CardContent>
            <Typography gutterBottom={true} variant="h5" component="h2">
              {"月嫂服务-婴儿护理"}
            </Typography>
            <Typography component="p">
              <Grid container={true}>
                {data.babyCare
                  ? data.babyCare.map((value, index) => {
                      return (
                        <Grid
                          key={index}
                          item={true}
                          xs={6}
                          style={{ padding: 10 }}
                        >
                          <Chip
                            avatar={<DoneIcon />}
                            label={value}
                            variant="outlined"
                          />
                        </Grid>
                      );
                    })
                  : ""}
              </Grid>
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
      <WhiteSpace size="sm" />
      <Card>
        <CardActionArea>
          <CardContent>
            <Typography gutterBottom={true} variant="h5" component="h2">
              {"职业道德"}
            </Typography>
            <Typography component="p">
              <Grid container={true}>
                {data.professionalEthics
                  ? data.professionalEthics.map(value => {
                      return (
                        <Grid item={true} xs={6} style={{ padding: 10 }}>
                          <Chip
                            avatar={<DoneIcon />}
                            label={value}
                            variant="outlined"
                          />
                        </Grid>
                      );
                    })
                  : ""}
              </Grid>
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
      <WhiteSpace size="sm" />
      <Card>
        <CardActionArea>
          <CardContent>
            <Typography gutterBottom={true} variant="h5" component="h2">
              {"生活照"}
            </Typography>
            <Typography component="p">
              <div className={classes.livePhoto}>
                <GridList
                  cellHeight={160}
                  className={classes.gridList}
                  cols={3}
                >
                  {data.lifePhotos
                    ? data.lifePhotos.map((tile, index) => (
                        <GridListTile
                          key={tile.uid}
                          cols={index === 0 ? 2 : 1}
                          rows={1}
                        >
                          <img src={tile.url} alt={tile.name} />
                        </GridListTile>
                      ))
                    : ""}
                </GridList>
              </div>
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </div>
  );
};

export default DetailInfo;
